<template>
  <div v-cloak>
    <div class="header_con">
      <div class="header">
        <div class="welcome fl">欢迎来到美多商城!</div>
        <div class="fr">
          <div class="login_btn fl">
            欢迎您：<em>{{ username }}</em>
            <span>|</span>
            <a @click="logout">退出</a>
          </div>
          <div class="user_link fl">
            <span>|</span>
            <a href="user_center_info.html">用户中心</a>
            <span>|</span>
            <a href="cart.html">我的购物车</a>
            <span>|</span>
            <a href="user_center_order.html">我的订单</a>
          </div>
        </div>
      </div>
    </div>

    <div class="search_bar clearfix">
      <a
        href="index.html"
        class="logo fl"
      ><img src="/static/images/logo.png"></a>
      <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
      <form
        method="get"
        action="/search.html"
        class="search_con fr mt40"
      >
        <input
          type="text"
          class="input_text fl"
          name="q"
          placeholder="搜索商品"
        >
        <input
          type="submit"
          class="input_btn fr"
          name=""
          value="搜索"
        >
      </form>
    </div>

    <div class="main_con clearfix">
      <div class="left_menu_con clearfix">
        <h3>用户中心</h3>
        <ul>
          <li><a
              href="user_center_info.html"
              class="active"
            >· 个人信息</a></li>
          <li><a href="user_center_order.html">· 全部订单</a></li>
          <li><a href="user_center_site.html">· 收货地址</a></li>
          <li><a href="user_center_pass.html">· 修改密码</a></li>
        </ul>
      </div>
      <div class="right_content clearfix">
        <div class="info_con clearfix">
          <h3 class="common_title2">基本信息</h3>
          <ul class="user_info_list">
            <li><span>用户名：</span>{{ username }}</li>
            <li><span>手机号：</span>{{ mobile }}</li>
            <li>
              <span>Email：</span>
              <div v-if='email_active'>
                {{email}}
              </div>
              <div v-else>
                <input
                  type="text"
                  v-model="email"
                >
                <span v-if='send_email'>邮件已发送</span>
                <button
                  v-else
                  @click='save_email'
                >保存</button>

              </div>

            </li>
          </ul>
        </div>

        <h3 class="common_title2">最近浏览</h3>
        <div class="has_view_list">
          <ul class="goods_type_list clearfix">
            <li
              v-for="sku in histories"
              :key='sku.id'
            >
              <a :href="sku.url"><img :src="sku.default_image_url"></a>
              <h4><a :href="sku.url">{{ sku.name }}</a></h4>
              <div class="operate">
                <span class="prize">￥{{ sku.price }}</span>
                <span class="unit">{{ sku.comments }}评价</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      host,
      user_id: localStorage.user_id,
      token: localStorage.token,
      username: '',
      mobile: '',
      email: '',
      email_active: false,
      send_email: false,   // 是否保存了邮箱
      send_email_btn_disabled: false,
      send_email_tip: '重新发送验证邮件',
      email_error: false,
      histories: []
    }
  },
  mounted() {
    // 判断用户的登录状态
    // debugger
    if (this.user_id && this.token) {
      // get /user/24/  drf接口需要带 token
      // 获取用户详细信息
      this.axios.get(this.host + '/user/' + this.user_id + '/', {
        // 向后端传递JWT token的方法
        headers: {
          'Authorization': 'JWT ' + this.token
        },
        responseType: 'json',
      })
        .then(response => {  // 200
          // 加载用户数据
          // debugger
          //{
          //     "id": 24,
          //     "username": "admin",
          //     "mobile": "13312341233",
          //     "email": "",
          //     "email_active": false
          // }
          // this.user_id = response.data.id;
          this.username = response.data.username;
          this.mobile = response.data.mobile;
          this.email = response.data.email;
          this.email_active = response.data.email_active;
          // 补充请求浏览历史
          // axios.get(this.host + '/browse_histories/', {
          //   headers: {
          //     'Authorization': 'JWT ' + this.token
          //   },
          //   responseType: 'json'
          // })
          //   .then(response => {
          //     this.histories = response.data;
          //     for (var i = 0; i < this.histories.length; i++) {
          //       this.histories[i].url = '/goods/' + this.histories[i].id + '.html';
          //     }
          //   })
        })
        .catch(error => {
          debugger

          if (error.response.status == 401 || error.response.status == 403) {
            alert('没有认证成功, 跳转到登录页!')
            location.href = '/login/';
          }
        });
    } else {
      location.href = '/login.html?next=/user_center_info.html';
    }
  },
  methods: {
    // 退出
    logout: function () {
      sessionStorage.clear();
      localStorage.clear();
      location.href = '/login';
    },
    // 保存email
    save_email: function () {
      // 保存email
      var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
      if (re.test(this.email)) {
        this.email_error = false;
      } else {
        this.email_error = true;
        return;
      }
      this.axios.post(this.host + '/emails/',
        { email: this.email },
        {
          headers: {
            'Authorization': 'JWT ' + this.token
          },
          responseType: 'json'
        })
        .then(response => {
          // debugger
          this.send_email = true;  // 已经保存邮箱
          // this.send_email_btn_disabled = true;
          // this.send_email_tip = '已发送验证邮件'
        })
        .catch(error => {
          // debugger
          console.log(error);
        });
    }
  }
}
</script>

<style>
</style>